<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>生产产能统计</title>
		<link rel="stylesheet" type="text/css" href="../../css/style.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/list.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/layui.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-ui.css" />
		<style type="text/css"> 
			.con_div{
				width: 25%;
				float: left;
				margin-left: 6%;
				margin-top: 20px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<!-- 蓝色背景区域 -->
		<div class="wrap">
			<!-- 白色可用区域 -->
			<div class="canuse">
				<!------ 位置 ------>
	            <p class="contentText local"><span>位置：生产数据统计 > 生产产能统计</span></p>
            	<!-- 搜索区 -->
	            <div class="search_area">
                    <h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>生产产能查询条件</span></h4>
                    <div class="select_area">
                        <div class="select_text clear">
                        	<div class="label_input">
	                            <label class="contentText">年份：</label> 
	                            <select name="" id="year">
	                            	<option value="">--请选择--</option>
	                            	<option value="2019">2019年</option>
	                            	<option value="2020">2020年</option>
	                            </select>
                        	</div>
                        	<div class="label_input">
	                            <label class="contentText">月份：</label> 
	                            <select name="" id="month">
	                            	<option value="">--请选择--</option>
	                            	<option value="1">一月</option>
	                            	<option value="2">二月</option>
	                            </select>
                        	</div>
                            <div class="floatLeft">
	                            <button onclick="search()" class="btn_search bgd_blue_search">查询</button>
	                            <button class="btn_clear bgd_white_clear">重置</button>
                            </div>
                        </div>
                    </div>
	            </div>
	            
	            <!-- 列表区 -->
	            <div class="show_list">
                	<div class="title_operate">
                    	<h4 class="sel_title"><img src="../../img/list/brand1.png" /><span>生产产能信息图表</span></h4>
                	</div>
                	<div class="list_area">
                        <div class="contentArea" style="height: 400px">
							<!-- 信息列表区 -->
							<div class="con_div">
								<tr class="con_text" ><h3>日产量(实际/计划)</h3></tr>
								<tr class="con_text">100/80</tr>
							</div>
							<div class="con_div">
								<span class="con_text"><h3>周产量(实际/计划)</h3></span>
								<span class="con_text">800/820</span>
							</div>
							<div class="con_div">
								<span class="con_text"><h3>月产量(实际/计划)</h3></span>
								<span class="con_text">25000/26000</span>
							</div>
							<!-- echarts 统计图表 -->
							<div class="chart" id="graph3"  style="width: 100%;height: 320px;left: -71px;z-index: 0;"></div>
						</div>
                    </div>
                </div>
			</div>
			<!-- 版尾  -->
			<div class="ending">
				Copyright© 2019-2020 磐基技术有限公司
			</div>
		</div>
	</body>
	<script src="../../js/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/frame/common.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/3rd/jquery-ui.js" type="text/javascript"></script>
	<script src="../../js/echarts.min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var h = document.documentElement.clientHeight;
		$(".wrap").css("height", h);
		
		// 获取每行 td 的兄弟节点
		$("td").hover(   
			function () {      
				$(this).parent().children().addClass("td_hover");   
			},    
			function () {      
				$(this).parent().children().removeClass("td_hover");   
			}
		);
		
		// 日期控件
		$(function(){
	        $(".dateControl").datepicker({
	        	dateFormat : 'yy-mm-dd',
	            monthNamesShort:["January","February","March","April","May","June", "July","August","September","October","November","December"],
	 		 	changeYear:true,
	 		 	changeMonth:true,
	 		 	showOn:"button",
	 		 	buttonImage:"../../img/button/calendar.png",
	 		 	buttonImageOnly:false
	        });
	     });
		
		function search(){
			var month = $("#month").val();
			if(month){
				showGraph2();
			}else{
				showGraph1();
			}
		}
		
		showGraph2();
		//显示产能增速统计图表
		function showGraph1(){
			var myChart = echarts.init(document.getElementById('graph3'));
			option = {
				grid: {//绘图网格
					left: '8%',
					right: '10%',
					top: '10%',
					bottom: '0%',
					containLabel: true
				},
				xAxis: {
					name: '日期',
					type: 'category',
					boundaryGap: false,
					data: ['2020-1', '2020-2', '2020-3', '2020-4', '2020-5', '2020-6', '2020-7', '2020-8', '2020-9', '2020-10', '2020-11', '2020-12'],
					 axisLabel:{
                            show:true,
                               interval: 0,    // {number}
                               rotate: 40,
                               textStyle: {
                                   color: 'blue',
                                   fontFamily: 'sans-serif',
                                   fontSize: 15,
                                   fontStyle: 'italic',
                                   fontWeight: 'bold'
                               }
                          },
					nameTextStyle:{
						color:"black"
					}
				},
				yAxis: {
					name: '产量',
					type: 'value',
					axisLabel: {
						show: true,
						
						textStyle: {
							color: 'black',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white",
						padding: [0, 0, -20, -90]
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				dataZoom:[{
		 　　　　	type:"inside"
		 　　　	}],
				series: [{
					data: [95, 120, 120, 100, 140, 140, 50, 120, 100, 140, 140, 50],
					type: 'line',
					radius: '70%',
					center: ['50%', '45%'],
					areaStyle: {}
				}]
			};

			myChart.setOption(option);	
		}
		
		function showGraph2(){
			var myChart = echarts.init(document.getElementById('graph3'));
			option = {
				grid: {//绘图网格
					left: '8%',
					right: '10%',
					top: '10%',
					bottom: '0%',
					containLabel: true
				},
				xAxis: {
					name: '日期',
					type: 'category',
					boundaryGap: false,
					data: ['2020-1-1', '2020-1-2', '2020-1-3', '2020-1-4', '2020-1-5', '2020-1-6', '2020-1-7',
					'2020-1-8', '2020-1-9', '2020-1-10', '2020-1-11', '2020-1-12', '2020-1-13', '2020-1-14',
					'2020-1-15', '2020-1-16', '2020-1-17', '2020-1-18', '2020-1-19', '2020-1-20', '2020-1-21',
					'2020-1-22', '2020-1-23', '2020-1-24', '2020-1-25', '2020-1-26', '2020-1-27', '2020-1-28',
					'2020-1-29', '2020-1-30', '2020-1-31'],
					axisLabel: {
						show: true,
  						rotate:0, 
  						  interval: 0,    // {number}
                               rotate: 40,
						textStyle: {
							color: 'black',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"black"
					}
				},
				yAxis: {
					name: '产量',
					type: 'value',
					axisLabel: {
						show: true,
						textStyle: {
							color: 'black',  //更改坐标轴文字颜色
						}
					},
					nameTextStyle:{
						color:"white",
						padding: [0, 0, -20, -90]
					}
				},
				tooltip: {
					trigger: 'axis'
				},
				dataZoom:[{
		 　　　　	type:"inside"
		 　　　	}],
				series: [{
					data: [95, 120, 120, 100, 140, 140, 50,95, 120, 120, 100, 140, 140, 50,95, 120, 120, 100, 140, 140, 50
					,95, 120, 120, 100, 140, 140, 50,95, 120, 120],
					type: 'line',
					radius: '70%',
					center: ['50%', '45%'],
					areaStyle: {}
				}]
			};

			myChart.setOption(option);	
		}
	</script>
</html>
